<template>
  <div id="app">
  	<transition name="router-fade" mode="out-in" >
    	<router-view/>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
<style lang='stylus'>
	#app {
	  font-family: 'Arial';
	  height: inherit;
	}
	.router-fade-enter-active, .router-fade-leave-active {
	    transition:  .13s;
	}
	.router-fade-enter, .router-fade-leave-active {
	    opacity: 0;
	}
	.el-menu--horizontal{
		text-align: center;
	}
	*{
		box-sizing: border-box;
		padding: 0;
		margin:0;
	}
	ul{
		list-style: none;
	}
	a{
		text-decoration: none;
	}
	.imgDrawer{
		.rtl{
			overflow: auto !important;
		}
		.el-drawer__body{
			.shortUrl{
				margin-top:3em;
			}
		}
	}
	.vue-puzzle-vcode{
		z-index:3000 !important;
	}
	@media (min-width:1400px){
		.imgDrawer{
			.el-drawer__body{
				.shortUrl{
					margin-top:12%;
				}
			}
		}
	}
</style>
